﻿@page "/docs/components/table"

<Seo Canonical="/docs/components/table" Title="Blazorise Table component" Description="Learn to use and work with the Blazorise Table component, that displays information in a way that’s easy to scan, so that users can look for patterns and insights." />

<DocsPageTitle Path="Components/Table">
    Blazorise Table component
</DocsPageTitle>

<DocsPageLead>
    Basic table is just for data display.
</DocsPageLead>

<DocsPageParagraph>
    Table displays information in a way that's easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Paragraph>
            <Code Tag>Table</Code> the main container.
        </Paragraph>
        <UnorderedList>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>TableHeader</Code> the optional <Strong>top</Strong> part of the table.
                </Paragraph>
                <UnorderedList>
                    <UnorderedListItem>
                        <Paragraph>
                            <Code Tag>TableRow</Code> header <Strong>row</Strong>.
                        </Paragraph>
                        <UnorderedList>
                            <UnorderedListItem>
                                <Paragraph>
                                    <Code Tag>TableHeaderCell</Code> a header <Strong>cell</Strong>.
                                </Paragraph>
                            </UnorderedListItem>
                        </UnorderedList>
                    </UnorderedListItem>
                </UnorderedList>
            </UnorderedListItem>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>TableFooter</Code> the optional <Strong>bottom</Strong> part of the table.
                </Paragraph>
            </UnorderedListItem>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>TableBody</Code> the main <Strong>content</Strong> of the table.
                </Paragraph>
                <UnorderedList>
                    <UnorderedListItem>
                        <Paragraph>
                            <Code Tag>TableRow</Code> each table <Strong>row</Strong>.
                        </Paragraph>
                        <UnorderedList>
                            <UnorderedListItem>
                                <Paragraph>
                                    <Code Tag>TableRowHeader</Code> a table cell <Strong>heading</Strong>.
                                </Paragraph>
                            </UnorderedListItem>
                            <UnorderedListItem>
                                <Paragraph>
                                    <Code Tag>TableRowCell</Code> a table <Strong>cell</Strong>.
                                </Paragraph>
                            </UnorderedListItem>
                        </UnorderedList>
                    </UnorderedListItem>
                </UnorderedList>
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Simple">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicTableExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicTableExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Striped">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableStrippedExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableStrippedExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Hoverable">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableHoverableExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableHoverableExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Bordered">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableBorderedExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableBorderedExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Borderless">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableBorderlessExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableBorderlessExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Small table">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableNarrowExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableNarrowExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Light header">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableLightHeaderExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableLightHeaderExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Dark header">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableDarkHeaderExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableDarkHeaderExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Mobile Mode">
        The table will have a dedicated layout for mobile devices where the columns are stacked on top of each other.
        <Alert Color="Color.Info" Visible>
            <AlertDescription>
                <Strong>Note:</Strong> In this mode the table may have limited functionality.
            </AlertDescription>
        </Alert>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth FrameUrl="docs/components/table/mobile-mode-iframe">
        <BasicMobileTableExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicMobileTableExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Fixed header">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableFixedHeaderExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableFixedHeaderExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Fixed columns">
        Implementing this feature involves setting the <Code>FixedPosition</Code> attribute to <Code>TableColumnFixedPosition.Start</Code> for anchoring to the left, or <Code>TableColumnFixedPosition.End</Code> for anchoring to the right, on a cell. Additionally, you must enable fixed columns on a table with the <Code>FixedColumns</Code> attribute.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableFixedColumnsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableFixedColumnsExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Scroll To a Row Or Pixel Offset">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableScrollToExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableScrollToExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Resizable">
        <Paragraph>
            The <Code>Resizable</Code> property of the Blazorise <Code>Table</Code> component determines whether the columns of the table can be resized by the user. When <Code>Resizable</Code> is set to <Code>true</Code>, the user can click and drag the edges of the column headers to adjust the width of the columns. When <Code>Resizable</Code> is set to <Code>false</Code>, the columns are fixed in size and cannot be resized by the user.
        </Paragraph>
        <Paragraph>
            The <Code>ResizeMode</Code> property of the Table component in Blazorise can have two modes: <Code>Header</Code> and <Code>Columns</Code>.
        </Paragraph>
        <Paragraph>
            <UnorderedList>
                <UnorderedListItem>
                    <Code>Header</Code>: When <Code>ResizeMode</Code> is set to <Code>Header</Code>, the user can resize the columns by dragging the edges of the column headers. This means that the user can only adjust the width of the columns by interacting with the header row of the table.
                </UnorderedListItem>
                <UnorderedListItem>
                    <Code>Columns</Code>: When <Code>ResizeMode</Code> is set to <Code>Columns</Code>, the user can resize the columns by dragging the edges of the entire column, including the header and the body cells. This means that the user can adjust the width of the columns by interacting with any part of the column, not just the header.
                </UnorderedListItem>
            </UnorderedList>
        </Paragraph>
        <Paragraph>
            To set the <Code>Resizable</Code> property of a <Code>Table</Code> component in Blazorise, you can use the following syntax:
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableResizableExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableResizableExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Grouping">
        <Paragraph>
            To use the grouping feature in the <Code>Table</Code> component from Blazorise, you must manually define the groups using the <Code>TableRowGroup</Code> component. This component wraps the rows that belong to a specific group and allows you to customize the appearance and behavior of the group.
        </Paragraph>
        <Paragraph>
            In this example, the <Code>Table</Code> component is grouped by the "Category" column, and the rows are organized into two groups: "Fruits" and "Vegetables". The <Code>TableRowGroup</Code> component specifies the value of the grouped column (e.g. "Fruits" or "Vegetables") and wraps the rows that belong to that group.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableGroupingExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableGroupingExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Caption">
        <Paragraph>
            The <Code>TableCaption</Code> component is used to provide a caption or title for the table. It is typically placed at the top of the table and can be styled to match the overall design of the table.
        </Paragraph>
        <Paragraph>
            The <Code>TableCaption</Code> component is a child of the <Code>Table</Code> component and should be placed before the <Code>TableHeader</Code> and <Code>TableBody</Code> components.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TableCaptionExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TableCaptionExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(Table), typeof(TableBody), typeof(TableCaption), typeof(TableRow), typeof(TableRowCell), typeof(TableRowGroup), typeof(TableRowHeader), typeof(TableHeader), typeof(TableHeaderCell), typeof(TableFooter)]" />